<template>
	<el-dialog v-model="props.visible" title="选择应用(该应用列表来自IRS编目，如未找到，请现在IRS编目)" width="80%" :before-close="close">
		<div>
			<HyTable
				@sendSelectValue="getSelectValue"
				v-if="props.visible"
				:searchFields="searchFields"
				:tableConfig="tableConfig"
				:tableColumns="tableColumns"
			>
				<template #singleSlot="{ row }">
					<el-radio-group v-model="selectValue.index">
						<span v-for="item in options" :key="item">
							<el-radio :value="item" v-if="item === row.index" />
						</span>
					</el-radio-group>
				</template>
				<template #indexSlot>
					<el-table-column fixed="left" type="index" label="序号" width="80" />
				</template>
			</HyTable>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="close">取消</el-button>
				<el-button type="primary" @click="sendData"> 确定 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import HyTable from '/@/components/HyTable/index.vue';
import { appListApi } from '/@/api/threeList/declare';

const props = defineProps({
	visible: Boolean,
});
const searchFields = computed(() => {
	return {
		appName: {
			label: '应用名称',
			type: 'input',
		},
	};
});
const options = computed(() => {
	let arr = [];
	for (let index = 0; index < 10; index++) {
		arr.push(index);
	}
	return arr;
});
const emits = defineEmits(['close']);
const close = () => {
	emits('close');
};
const tableConfig: any = {
	request: appListApi,
	singleSelect: true,
};
//获取选择
const selectValue = ref<any>({
	indexe: null,
});
const getSelectValue = (value: any) => {
	selectValue.value = value || {
		indexe: null,
	};
};

//确定
const sendData = () => {
	emits('close', selectValue.value);
};
const tableColumns = [
	{ prop: 'appName', slot: 'singleSlot', width: 50, fixed: 'left' },
	{ prop: 'appName', slot: 'indexSlot' },
	{ prop: 'appName', label: '应用名称' },
	{ prop: 'appCode', label: '应用编码' },
	{ prop: 'appManagerName', label: '应用管理员' },
	{ prop: 'appManagerPhone', label: '应用管理员联系方式' },
	{ prop: 'buildOrgName', label: '开发部门' },
];
</script>

<style scoped lang="scss"></style>
